<template>
  <div>
    <h2>编辑推荐</h2>
    <ul style="display: flex; flex-wrap: wrap">
      <HomePlayListCard
        v-for="item in personalized"
        :key="item.id"
        :item="item"
      />
    </ul>
    <h2>最新音乐</h2>
    <ul>
      <SongListItem
        v-for="item in newsong"
        :key="item.id"
        :item="item"
        @update:currentSong="$emit('update:currentSong', $event)"
        :currentSong="currentSong"
        :playing="playing"
      />
    </ul>
  </div>
</template>

<script>
import HomePlayListCard from "@/components/HomePlayListCard.vue";
import SongListItem from "@/components/SongListItem.vue";
export default {
  components: {
    HomePlayListCard,
    SongListItem,
  },
  props: ["currentSong","playing"],
  data: function () {
    return {
      personalized: [],
      newsong: [],
    };
  },
  created: function () {
    this.axios.get("/personalized?limit=6").then((res) => {
      //   console.log(res.data);
      this.personalized = res.data.result;
    });
    this.axios.get("/personalized/newsong").then((res) => {
      //   console.log(res.data);
      this.newsong = res.data.result;
    });
  },
};
</script>

<style>
</style>